{% extends 'mobile/base_mobile.html' %}
{% load staticfiles %}
{% load my_filters %}
{% block title %}
    {{ shop.title }}
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
    <script type="text/javascript" src="{% static 'lib/swiper.min.js' %}" charset="utf-8"></script>
    <style>
        body {
            background-color: {{ artical_color|default:'#c00606'}};
            color: white;
        }
    </style>
    <link rel="stylesheet" href="{% static 'css/mobile_home.css' %}">
{% endblock %}
{% block content %}
    <div class="top">
        <div class="top_swapper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    {% for image in shop.get_images %}
                        <div class="swiper-slide">
                            <img class="swiper-lazy wi100" src="{{ image.url }}">
                        </div>
                    {% endfor %}
                </div>
                <div class="pagination_left">
                    <img class="shop_logo" src="{{ shop.get_logo_url }}">
                    <span class="shop_title">{{ shop.title }}</span>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination">
                </div>
                <!-- Add Arrows -->
                {#                <div class="swiper-button-next"></div>#}
                {#                <div class="swiper-button-prev"></div>#}
            </div>
        </div>
    </div>
    <!--中部活动分类-->
    <div class="act_menu row">
        <div class="act-logo wi25" onclick="location.href='{% url "wehelp:mobile_list" %}?shop={{ shop.id }}'">
            <img class="wi30" src="{% static 'images/mobile_home/kanjia.png' %}">
            <p class="menu_title">微砍价</p>
        </div>
        <div class="act-logo wi25" onclick="location.href='{% url "groupshopping:mobile_list" %}?shop={{ shop.id }}'">
            <img class="wi30" src="{% static 'images/mobile_home/groupshopping.png' %}">
            <p class="menu_title">微团购</p>
        </div>
        <div class="act-logo wi25" onclick="location.href='{% url "kill:mobile_list" %}?shop={{ shop.id }}'">
            <img class="wi30" src="{% static 'images/mobile_home/kill.png' %}">
            <p class="menu_title">微秒杀</p>
        </div>
        <div class="act-logo wi25" onclick="location.href='{% url "product:mobile_list" %}?shop={{ shop.id }}'">
            <img class="wi30" src="{% static 'images/mobile_home/product-logo.png' %}">
            <p class="menu_title">微商品</p>
        </div>
    </div>
    <div class="kan_recommend" onclick="location.href='{% url "kill:mobile_list" %}?shop={{ shop.id }}'">
        <div class="left_img kan_recommend_div">
            <img src="{% static 'images/mobile_home/recommend_meinv.png' %}">
        </div>
        <div class="middle_text kan_recommend_div">
            <div class="kan_limit"><span>0.01</span>元秒杀</div>
            <div class="new_shop">新店开业专用</div>
        </div>
        <div class="right_btn kan_recommend_div">
            <span>我要参加</span>
        </div>
    </div>
    <!--商品列表-->
    <div class="pannel10">
        {% for product in product_list_1 %}
            <div class="product_item" onclick="location.href='{{ product.get_mobile_url }}'">
                <div class="item_img">
                    <img class="wi60" src="{{ product.get_image_url }}">
                </div>
                <div class="product_title">{{ product.title }}</div>
                <div class="product_price">
                    <div class="span_price_original">
                        原价：{{ product.price_original|div100 }}
                    </div>
                    <div class="text_red">
                        折扣价：{{ product.price_discount|div100 }}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="pannel10 grid_pannel11">
        {% for item in groupshopping_recommends %}
            <div class="groupshopping_item" onclick="location.href='{{ item.get_mobile_url }}'">
                <div class="groupshopping_intro">
                    <div class=""><p class="act_title" style="">{{ item.title }}</p></div>
                    <div class=""><p style="font-size: .8rem">满349，减100元</p></div>
                    <div class=""><span class="go_label">GO ></span></div>
                </div>
                <div class="groupshopping_img">
                    <img src="{{ item.get_image_url }}">
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="groupshopping_recommend">
        <div class="kan_recommend_div">
            <div class="kan_limit">每天<span>10</span>点付款前5名，买N免一</div>
            <div class="new_shop">(免去实付款最低额，N>2)</div>
        </div>
        <div class="right_btn click_view">
            <span>点击<br>&nbsp;&nbsp;</span><span style="font-style:italic">查看</span>
        </div>
    </div>
    <div class="kan_celebrate pannel5 ">
        <div class="grid_pannel211" style="height: 4rem">
            <div class="inline_block">
                <div class="kuang_span">砍价狂欢节<p class="kan_right_btn">></p></div>
                <div style="padding: 0 .5rem">15天保价 买贵退</div>
            </div>
            <div class="celebrate_img"><img class="" src="{% static 'images/mobile_home/kan_celebrate.jpg' %}"></div>
            <div class="kan_already"><p>已砍2K+件</p></div>
        </div>
        <div class="pannel10 backgroud_div"></div>
        <div class="pannel5 kan_main grid_pannel322">
            <div class="left_kan">
                <div class="invite_friends">邀请好友砍价</div>
                <div class="min_price">最低可0元</div>
                <div class="more_kan" onclick="location.href='{% url "wehelp:mobile_list" %}?shop={{ shop.id }}'">
                    超多砍价活动 >
                </div>
            </div>
            {% for kanjia in kanjia_two %}
                <div class="kan_2" onclick="location.href='{{ kanjia.get_mobile_url }}'">
                    <div class="">
                        <img class="kanjia_img" src="{{ kanjia.get_image_url }}">
                    </div>
                    <p class="title_inone">{{ kanjia.title }}</p>
                    <p class="price_durarion">
                        原价{{ kanjia.price_original|div100 }}砍至{{ kanjia.price_discount|div100 }}元</p>
                </div>
            {% endfor %}
        </div>
    </div>
    {#    今日推荐#}
    <div class="recommend_today pannel5">
        <div class="recommend_today_title">
            <img class="recommend_today_img" src="{% static 'images/mobile_home/flash.png' %}">
            <span class="recommend_today_today">今日推荐</span>
            <span class="recommend_today_must">必抢超低价</span>
        </div>
        <div class="pannel5">
            {% for product in product_list_2 %}
                <div class="product_item" onclick="location.href='{{ product.get_mobile_url }}'">
                    <div class="item_img">
                        <img class="wi60" src="{{ product.get_image_url }}">
                    </div>
                    <div class="product_title">{{ product.title }}</div>
                    <div class="product_price">
                        <div class="span_price_original">
                            原价：{{ product.price_original|div100 }}
                        </div>
                        <div class="text_red">
                            折扣价：{{ product.price_discount|div100 }}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <!--底部主菜单-->
    <div class="bottom_menu grid_pannel11">
        <div class="home_btn active_label">
            <img src="{% static 'images/mobile_home/home_selected.png' %}">
            <p>首页</p>
        </div>
{#        <div class="order_btn">#}
{#            <img src="{% static 'images/mobile_home/order.png' %}">#}
{#            <p>订单</p>#}
{#        </div>#}
        <div class="personal_btn" onclick="window.location.href='{% url "account:personal_home" %}'">
            <img src="{% static 'images/mobile_home/personal.png' %}">
            <p>我的</p>
        </div>
    </div>
    <script>
        var swiper = new Swiper('.swiper-container', {
            loop: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                type: 'fraction',
            },
            //navigation: {
            //    nextEl: '.swiper-button-next',
            //    prevEl: '.swiper-button-prev',
            //},
        });
    </script>
    {% if sign %}
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script type="text/javascript">
            wx.config({
                debug: false,
                appId: '{{ sign.appId}}',
                timestamp: {{ sign.timestamp }},
                nonceStr: '{{ sign.nonceStr }}',
                signature: '{{ sign.signature }}',
                jsApiList: [
                    'onMenuShareAppMessage',
                    'hideMenuItems',
                ]
            });

            wx.ready(function () {
                // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                wx.checkJsApi({
                    jsApiList: [
                        'onMenuShareAppMessage',
                        'hideMenuItems'
                    ],
                    success: function (res) {
                    }
                });

                wx.hideMenuItems({
                    menuList: ['menuItem:share:timeline']
                });

                // 2. 分享接口
                // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
                wx.onMenuShareAppMessage({
                    title: '{{ shop.title|linebreaksbr|striptags }}',
                    link: '{{ sign.share_url|safe }}',
                    desc: '“{{ shop.title|linebreaksbr|striptags }}”的店家又双叒叕搞活动了，我们去给他上一课！',
                    imgUrl: '{{ shop.get_logo_url }}',
                    trigger: function (res) {
                    },
                    success: function (res) {
                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });
            });
        </script>
    {% endif %}
{% endblock %}